<template>
	<div>
		<router-link 
			v-show="showBack" to="/" 
			tag="div" 
			class="header-back"
		>
			<div class="iconfont icon-back"></div>
		</router-link>
		<div class="header" 
			v-show="!showBack" 
			:style="fadeStyle"
		>
			<div class="header-title">
				{{ sightName }}
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default {
		name: 'detail-header',
		props: {
			sightName: String
		},
		data () {
			return {
				showBack: true,
				fadeStyle: {
					'opacity': 0
				},
			}
		},
		methods: {
			fadeScroll () {
				const currentTop = document.documentElement.scrollTop;
				let opacity = currentTop/140;
				if( currentTop > 60 ) {
					this.showBack = false;
					opacity = opacity > 1 ? 1 : currentTop/140;
					this.fadeStyle = { opacity };
				}else{
					this.showBack = true;
				}
			}
		},
		activated () {
			window.addEventListener('scroll',this.fadeScroll)
		},
		unmounted () {
			window.removeEventListener('scroll',this.fadeScroll)
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	.header-back
		position: absolute;
		top: .1rem;
		left: .1rem;
		background: rgba(0,0,0,.5);
		font-size: 1rem;
		border-radius: 50%;
		text-align: center;
		line-height: .8rem;
		width: .8rem;
		height: .8rem;
		color: #fff;
		font-size: .4rem;
		z-index: 1;
	.header
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: .86rem;
		line-height: .86rem;
		text-align: center;
		overflow: hidden;
		color: #fff;
		background:$bgColor;
		font-size: .4rem;
		.header-left
			position: absolute;
			left: 0;
			top: 0;
			width: .64rem;
			color: #fff;
</style>